<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>丁丁网新增图书界面</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!-- <link rel="stylesheet" type="text/css" href="css/datedropper.css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-fileinput.css" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="/after/css/LAQcss/datedropper.css">
<link href="/after/css/LAQcss/bootstrap.min.css" rel="stylesheet">
<link href="/after/css/LAQcss/bootstrap-fileinput.css" rel="stylesheet">
<style type="text/css">
body{background:#d3d3d3;}
.demo{margin:50px auto 0px auto;width:800px;height: 700px; background: #ffffff;}
.kuai1{padding-top:50px;padding-left: 100px;}
.kuai2{ float: right; padding-right: 100px;}
.kuai3{float: right; }
.input{padding:5px;border:1px solid #d3d3d3}
textarea{
resize: none;
}
.kuai4{
	float: right;
    padding-right: 100px;
    padding-top: 20px;
}
#zzc{
    position: absolute;
    width:800px;height: 700px;
    display: none;
    background-color: gray;
    opacity: 0.5 !important;
    filter: alpha(opacity=50);
    z-index: 5;
}
#a11 {margin-left: 50px;}
#a12 {margin-left: 50px;}
#wenzi{font-weight:bold;}
#wenzi1{font-weight:bold;}
#wenzi2{font-weight:bold;}

</style>

</head>

<body>

<div id="main">
	<div class="demo">
		<div id="zzc"></div>
	<div class="kuai1">
	<form action="/LAQBook/addBook.do" method="post" enctype="multipart/form-data" onsubmit="return checkAll()">
	<div class="kuai2">

         
        <div class="fileinput fileinput-new" data-provides="fileinput"  id="exampleInputUpload">
                    <div class="fileinput-new thumbnail" style="width: 200px ;height: auto;max-height:150px;">
                        <img id='picImg' style="width: 100%;height: auto;max-height: 140px;" src="/after/images/LAQimages/noimage.png"alt="" />
                    </div>
                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
                    <div>
                        <span class="btn btn-primary btn-file">
                            <span class="fileinput-new">选择要上传的图书图片</span>
                            <span class="fileinput-exists">换一张</span>
                           <input type="file" name="photos" id="picID" onblur="b9()" accept="image/gif,image/jpeg,image/x-png"/>
                        </span>
                        <a href="javascript:;" class="btn btn-warning fileinput-exists" data-dismiss="fileinput">移除</a>
                    </div>
        </div>


       

	</div>
	    <p>图书的名称：<input type="text" class="input" id="a1" name="name" onblur="b1()" /><span id="c1"></span></p>
		<p>图书的作者：<input type="text" class="input" id="a2" name="author"/ onblur="b2()"><span id="c2"></span></p>
		<p>图书出版社：<input type="text" class="input" id="a3" name="publish"/ onblur="b3()"><span id="c3"></span></p>
		<p>出版的日期：<input type="text" class="input" id="pickdate" name="publish_date" onblur="b4()"/><span id="c4"></span></p>
		<p>图书的库存：<input id="a5" style="width:280px;" class="input" data_min="0" data_max="500000" data_edit="true" data_digit="0" data_step="10" value="0" name="stock" onblur="b5()"/><span id="c5"></span></p> 
		<div class="kuai2">

		       图书的简介：<textarea rows="5" cols="25" name="content" id="a8" onblur="b8()"></textarea><p> <span id="c8"></span>	</p>
		
		</div>

	    <p>图书的价格：<input id="a6" style="width:280px;" class="input" data_min="0" data_max="500000" data_edit="true" data_digit="2" data_step="1" value="0.01" name="price" onblur="b6()"/><span id="c6"></span></p> 
	    <p>图书点击量：<input id="a7" style="width:280px;" class="input" data_min="0" data_max="500000" data_edit="true" data_digit="0" data_step="10" value="0" name="click" onblur="b7()"/><span id="c7"></span></p>


	    <div class="kuai4">图书的类别：<span id="stypes" ></span></div>


        <p>图书的内容：<input type="file" class="input" id="a10" name="photos" style="width:270px" onblur="b10()" accept=".txt"/></p>

        <br>
		<center><input  type="submit" value="添加" style="width:300px" ></center><br>
        <center ><span id="wenzi2">数据太多？试试“批量添加”吧。</span> </center>
		</form>
        <center><button onclick="dakai()" style="width:300px">批量添加</button></center>

	 </div>
		
	</div>
	
</div>
<div id="piliang" style="background-color:#ffffff;display: none; position: absolute;left:40%;top:300px;text-align:center; z-index: 1000; width: 400px; height: 250px; border:  1px solid red;">
    <div style="width: 400px;height: 20px;"><span style="float: right; width: 50px;background-color: #FF4500;" onclick="guanbi()"><a href="#" >关闭</a></span></div>

    <form id="form" action="/file/addfile.do" method="post" enctype="multipart/form-data" onsubmit="return checkAll1()"><br>
        <span id="wenzi">导入图片和电子书文档打包文件</span> <input type="file" name="files"  multiple="multiple" webkitdirectory style=" border:1px solid #d3d3d3" id="a11" onblur="b11()" /><br><br>

        <span id="wenzi1">导入excel数据表格</span> <input type="file" name="excel" style="border:1px solid #d3d3d3" id="a12" onblur="b12()" accept=".xls"><br>
        <input  type="submit" value="添加"  >
    </form>
</div>
<script type="text/javascript" src="/after/js/LAQjs/jquery-1.12.3.min.js"></script>
<script src="/after/js/LAQjs/datedropper.min.js"></script>
<script src="/after/js/LAQjs/bootstrap-fileinput.js"></script>
<script src="/after/js/LAQjs/num-alignment.js"></script>
<script src="/after/js/layer/layer.js" charset="utf-8"></script>
<script>
    function b11(){
        if(a11.value==""){
            return false;
        }else{
            return true;
        }
    }
    function b12(){
        if(a12.value==""){
            return false;
        }else{
            return true;
        }
    }
    function checkAll1(){
        if(b11() && b12() ){
            layer.msg("验证成功！");
        }else{
            layer.msg("验证未通过，请核实重新输入后再次提交！！");
            return false;
        }

    }
    function guanbi(){
        $("#piliang").hide();
        $("#zzc").hide();
    }
    function dakai(){
        $("#zzc").show();
        $("#piliang").show();
    }
$("#pickdate").dateDropper({
	animate: false,
	format: 'Y-m-d',
	maxYear: '2020'
});

var getStype=function () {
    $.ajax({
        type:'GET',
        dataType:'json',
        data:{
            s:'a'
        },
        url:'/LAQBook/getStypes.do',
        success:function (msg) {
            var selectTop="<select name='sName' onchange='getId()' id='sel'  style='width:200px; height :32px'>";
            var selectCenter="";
            var total="";
            $.each(msg.stype,function (a,b) {
                selectCenter+="<option value='"+b.id+"'>"+b.type+"</option>";
            });
            total=selectTop+selectCenter+"</select>";
            $("#stypes").html(total);
        }
    });
}
getStype();

function b1(){
	
		
		if(a1.value==""){
			/**/
			document.getElementById("c1").innerHTML="<font color='green'>名称不能为空</font>";
			return false;
		}else{
			document.getElementById("c1").innerHTML="";
			return true;
		}
	}
function b2(){
	
		
		if(a2.value==""){
			/**/
			document.getElementById("c2").innerHTML="<font color='green'>作者不能为空</font>";
			return false;
		}else{
			document.getElementById("c2").innerHTML="";
			return true;
		}
	}
	function b3(){
		
		
		if(a3.value==""){
			/**/
			document.getElementById("c3").innerHTML="<font color='green'>此处不能为空</font>";
			return false;
		}else{
			document.getElementById("c3").innerHTML="";
			return true;
		}
	}
	function b4(){
		
		
		if(pickdate.value==""){
			/**/
			document.getElementById("c4").innerHTML="<font color='green'>日期不能为空</font>";
			return false;
		}else{
			document.getElementById("c4").innerHTML="";
			return true;
		}
	}
	function b5(){
		var kucun = a5.value;
		var reg = /^[0-9]\d{0,4}$/;
		
		if(reg.test(kucun)){
			/**/
			document.getElementById("c5").innerHTML="";
		
			return true;
		}else{
				document.getElementById("c5").innerHTML="<font color='green'>请输入0至100000之间的整数</font>";
			return false;
		}
	}
	function b6(){
		var jiage = a6.value;
		var reg = /^(0.01|([0-9]\d{0,4}))(\.\d{0,2})?$/;
		
		if(reg.test(jiage)){
			/**/
			document.getElementById("c6").innerHTML="";
		
			return true;
		}else{
				document.getElementById("c6").innerHTML="<font color='green'>请输入大于0至100000的数字（可支持小数点后两位）</font>";
			return false;
		}
	}
	function b7(){
		var dianji = a7.value;
		var reg = /^[0-9]\d{0,4}$/;
		
		if(reg.test(dianji)){
			/**/
			document.getElementById("c7").innerHTML="";
		
			return true;
		}else{
				document.getElementById("c7").innerHTML="<font color='green'>请输入0至100000之间的整数</font>";
			return false;
		}
	}
	function b8(){
	
		
		if(a8.value==""){
			/**/
			document.getElementById("c8").innerHTML="<font color='green'>内容不能为空</font>";
			return false;
		}else{
			document.getElementById("c8").innerHTML="";
			return true;
		}
	}
	function b9(){
	
		
		if(picID.value==""){
			
			return false;
		}else{
			
			return true;
		}
	}
	function b10(){
	
		
		if(a10.value==""){
			
			return false;
		}else{
			
			return true;
		}
	}
	function checkAll(){
		if(b1() && b2() && b3() &&b4() &&b5() &&b6() &&b7() &&b8() &&b9()&&b10() ){
            layer.msg("验证成功！");
		}else{
            layer.msg("验证未通过，请核实重新输入后再次提交！！");
			return false;
		}
	}
	

</script>

</body>
</html>
